<!-- eslint-disable @typescript-eslint/no-explicit-any -->
<script setup lang="ts">
  import { reactive, ref } from 'vue'
  import ModalHeader from '@/components/ModalHeader/index.vue'
  import { NForm, NFormItem, NInput, NModal, NButton } from 'naive-ui'
  const showModal = ref(false)
  const handleOpen = (pass: boolean) => {
    showModal.value = true
    form.pass = pass
  }
  const handleClose = () => {
    showModal.value = false
  }

  const form = reactive({
    auditResult: '',
    pass: false,
  })

  const rules = ref({
    auditResult: [{ required: true, message: '请输入审核理由' }],
  })

  const formRef = ref()
  const emit = defineEmits(['submit'])
  const handleSubmit = () => {
    formRef.value?.validate((errors: any) => {
      if (!errors) {
        console.log('验证通过')
        emit('submit', form)
        handleClose()
      } else {
        console.log(errors)
      }
    })
  }

  defineExpose({
    handleOpen,
  })
</script>

<template>
  <n-modal
    style="width: 528px"
    :bordered="false"
    role="dialog"
    aria-modal="true"
    v-model:show="showModal"
    transform-origin="center"
    @close="handleClose"
  >
    <div class="w-full h-full flex flex-col bg-white rounded pingfang">
      <ModalHeader title="审核意见" @close="handleClose" />
      <n-form
        class="flex-1 px-5"
        ref="formRef"
        :model="form"
        :rules="rules"
        require-mark-placement="left"
      >
        <n-form-item path="auditResult" :show-label="false" required>
          <n-input
            show-count
            maxlength="500"
            :autosize="{ minRows: 3, maxRows: 3 }"
            type="textarea"
            v-model:value="form.auditResult"
            placeholder="请输入审核理由"
          />
        </n-form-item>
        <div class="flex justify-end px-5 py-4">
          <n-button class="w-[60px] mr-4 text-[#4A5055]" @click="handleClose"> 取消 </n-button>
          <n-button type="primary" class="w-[60px]" @click="handleSubmit"> 确认 </n-button>
        </div>
      </n-form>
    </div>
  </n-modal>
</template>
